html{
    /* 设置当前网页的视距为800px，人眼距离网页的距离 */
   perspective: 800px;
}
.cube{
   width: 400px;
   height: 400px;
   margin: 150px auto;
   /* transform默认情况下是2d变形  如果想要设置3d变形效果需要设置 transform-style: preserve-3d;*/
   transform-style: preserve-3d;
   animation: rotate 3s  linear infinite;
   .box1{
    transform: rotateY(90deg) translateZ(200px);
    }
    .box2{
        transform: rotateY(-90deg) translateZ(200px);
    }
    .box3{
        transform: rotateX(90deg) translateZ(200px);
    }
    .box4{
        transform: rotateX(-90deg) translateZ(200px);
    }
    .box5{
        transform: rotateX(0deg) translateZ(-200px);
    }
    .box6{
        transform:translateZ(200px) rotateY(180deg) ;
    }
}

.cube > div{
   opacity: .8;
   position: absolute;
}

img{
   width: 400px;
   height: 400px;
   vertical-align: top;
}
  
@keyframes rotate{
from{
   transform: rotateX(0) rotateZ(0);
}
to{
   /* turn表示转一圈 */
   transform: rotateX(1turn) rotateZ(1turn);
}
}